zizhujianzhan_web/pages/about/[dir]/index.html.vue

<template>
    <!-- 头部 -->
    <templateHead></templateHead>
    <!-- 菜单 -->
    <templateMenu></templateMenu>
    <div>
        <!-- 广告组件 -->
        <templateAd :adTag="'nmw_page_0001'" :skinId="skinId" :adData="adData"></templateAd>
        <!-- 底部详情-详情 -->
        <templateAboutDetail :skinId="skinId" :templateData="testTemplateData2"></templateAboutDetail>
        <!-- 广告组件 -->
        <templateAd :adTag="'nmw_page_0001'" :skinId="skinId" :adData="adData"></templateAd>
    </div>
    <!-- 底部 -->
    <templateFoot></templateFoot>
</template>

<script setup>
//0.加载全局模板组件 start---------------------------------------->
//0.1 全局通栏
import templateHead from '@/components/template/sector/head/1200x200/1.vue'
import templateMenu from '@/components/template/sector/menu/1200x130/1.vue'
import templateFoot from '@/components/template/sector/foot/1200x580/1.vue'
//0.2 局部通栏
//0.2.1 广告组件
import templateAd from '@/components/template/sector/body/ad/1200x90/1.vue'
//0.2.2 底部详情-详情
import templateAboutDetail from '@/components/template/sector/body/about/1200x1150/1.vue'
//0.加载全局模板组件 end---------------------------------------->

//1.获得基本信息单元 start---------------------------------------->
//1.1获得页面依赖
import { ref, onMounted } from 'vue';

//1.2获得pinia源
import { useTemplateBaseStore } from '@/stores/templateBase'
const templateBaseStore = useTemplateBaseStore()
//1.3获得该页的皮肤id - 在每个组件中也是同样的获得方法
const skinId = ref("")
const websiteId = ref("")
//1.4获得站点基本信息
const responseStatus = await requestDataPromise('/web/getWebsiteAllinfo', {
    method: 'GET',
    query: {
        'link_textnum':24,
        'link_imgnum':18,
        'link_footnum':4
    },
});
if (responseStatus.code == 200) {
    //0.3.1设置站点基本信息
    templateBaseStore.setWebSiteInfo(responseStatus.data)
    websiteId.value = responseStatus.data.website_head.id;//获得网站id
    //0.3.2设置皮肤id
    skinId.value = templateBaseStore.webSiteInfo.website_foot.foot_info.template_id;
    console.log("当前的网站id:"+responseStatus.data.website_head.id)
    //0.3.3设置seo信息
    let seoTitle = templateBaseStore.webSiteInfo.website_head.title;
    let seoDescription = templateBaseStore.webSiteInfo.website_head.description;
    let seoKeywords = templateBaseStore.webSiteInfo.website_head.keywords;
    let seoSuffix = templateBaseStore.webSiteInfo.website_head.suffix;
    let seoName = templateBaseStore.webSiteInfo.website_head.website_name;
    useSeoMeta({
        title: seoTitle + "_" + seoSuffix,
        meta: [
            { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
            { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 }
        ]
    });
}
//1.5获得广告池
const adData = ref([]);
const adResponseStatus = await requestDataPromise('/web/getWebsiteAdvertisement', {
    method: 'GET',
    query: {},
});
if (adResponseStatus.code == 200) {
    adData.value = adResponseStatus.data;
    templateBaseStore.setAdList(adResponseStatus.data)
}
//1.获得基本信息单元 end---------------------------------------->

//2.测试数据 start ---------------------------------------->
//静态链接测试数据
const testTemplateData2 = {
    "sectorName": "linkSector",
    "componentList": [
        {
            "component_type": 3,
            "component_style": 1,
            "sort": 1,
            "componentData": {}
        },
        {
            "component_type": 3,
            "component_style": 1,
            "sort": 1,
            "componentData": {}
        }
    ],
    "sort": 4
}
//2.测试数据 end ---------------------------------------->
</script>

<style lang="less" scoped>
    @import '@/assets/css/about.less';
</style>